import {createStyles, Theme, withStyles} from '@material-ui/core/styles';
import {WithStyles} from "@material-ui/core/styles/withStyles";
import * as React from "react";
import {Icon, List,message} from "antd";
import {Message} from "../../type/CommonData";
import {getUserInfoMessage} from "../../axios/RequestUser";
import {RouteComponentProps} from "react-router"
// import {getUserMsg, LogIn} from "../../axios/Request";

const styles = (theme: Theme) => createStyles<"InfoCenter" | "msgBox" | "msg" | "time" | "btnBox"|"cls">({
    InfoCenter: {
        "& .ant-list-split .ant-list-item:nth-child(odd)": {
            backgroundColor: "#eeeeee"
        },
        "& .ant-list-split .ant-list-item": {
            padding:"15px 20px"
        }
    },
    msgBox: {
        display: "flex",
        minWidth: 0,

    },
    msg: {
        flex: 1,
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
    },
    time: {
        width: "80px"
    },
    btnBox: {
        textAlign:"center",
        width: "60px",
        "& .anticon":{
            color:"#3987cf"
        }
    },
    cls:{
        cursor:"pointer"
    }
});

interface Iprops extends WithStyles<typeof styles>,RouteComponentProps<{id:any}> {

    infoCount: number,
    data: Message[]
}

interface Istates {
    msgList: any
}

class InfoCenter extends React.Component<Iprops, Istates> {
    constructor(props: Iprops) {
        super(props);
        this.state = {
            msgList: []
        }
    }

    public componentWillMount() {
        getUserInfoMessage().then((value:any) => {
            this.setState({
                msgList:value.data
            });
            if(value.data.length === 0 ){
                message.warning("暂无消息")
            }
        });
    }
    public handleDelete=(selfId:number)=> {
        const list = this.state.msgList;
        list.splice(list.findIndex((item:any) => item.id === selfId),1);
        this.setState({
            msgList: list
        })
    };
    public render() {
        const {classes} = this.props;
        return (
            <div className={classes.InfoCenter}>
                <h3>
                    全部消息{this.props.infoCount}
                </h3>
                <div>
                    <List dataSource={this.state.msgList}
                          renderItem={(item: Message) => (
                              <List.Item className={classes.msgBox}>
                                  <div className={classes.msg}>
                                      {item.message}
                                  </div>
                                  <div className={classes.time}>
                                      {item.time}
                                  </div>
                                  <div className={classes.btnBox}>
                                      <span className={classes.cls} onClick={this.handleDelete.bind(this,item.id)}>
                                          <Icon type="close"/>
                                      </span>
                                  </div>
                              </List.Item>
                          )}
                    />
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(InfoCenter);
